var $jq = jQuery.noConflict();

var TicTacToeCanvas = function(_board, _jqCanvas)
{
    this.board      = _board;
    this.jqCanvas   = _jqCanvas;

    var canvas = (this.jqCanvas)[0];
    if (canvas !== null && typeof canvas === "object")
    {
        // TODO: throw an exception.
    }
}

TicTacToeCanvas.prototype.getDevIndPosition = function(xPos, yPos)
{
    return 0;
}

TicTacToeCanvas.prototype.setupLayout = function()
{
    var canvas = (this.jqCanvas)[0];

    /* TODO: need to replace the following hard coded values with the jqueary width reading and dividing appropriately */
    /* TODO: need to check what's the input values types for moveTo and lineTo */

    var context = canvas.getContext("2d");
    context.beginPath();

    for (var x = 100.5; x < 300; x += 100)
    {
        context.moveTo(x, 0);
        context.lineTo(x, 300);
    }

    for (var y = 100.5; y < 300; y += 100)
    {
        context.moveTo(0, y);
        context.lineTo(300, y);
    }

    context.strokeStyle = "rgb(0, 0, 0)";
    context.stroke();
}

TicTacToeCanvas.prototype.setupDND = function()
{
    var images = document.getElementsByTagName('img');
    var imagesCount = images.length;

    while (imagesCount--)
    {
       // if (images[imagesCount].ondragstart)
        {
            images[imagesCount].ondragstart = function(event)
            {
                event = event || window.event;
                event.dataTransfer.setData('Text', this.src);
            }
        }
    }

    var canvas = (this.jqCanvas)[0];
    if (canvas.hasAttribute("dropzone"))// && canvas.ondrop)
    {
        canvas.ondrop = function(event)
        {
            event = event || window.event;

            if (event.preventDefault)
                event.preventDefault();

            var xPos = event.pageX - this.offsetLeft;
            var yPos = event.pageY - this.offsetTop;

            var image = document.createElement('img');
            image.src = event.dataTransfer.getData("Text");

            $jq(image).load
            (
                function(event)
                {
                    var context = canvas.getContext("2d");
                    context.drawImage(image, xPos,yPos);
                }
            )

            event.cancelBubble = true;
            return false;
        }

        canvas.ondragover = function()
        {
            return false;
        }

        // IE event model:
        canvas.ondropenter = function()
        {
            return false;
        }
    }
}

TicTacToeCanvas.prototype.setupMouseTracer = function(_jqDebugInfoXPos, _jqDebugInfoYPos)
{
    var jqDebugInfoXPos = _jqDebugInfoXPos;
    var jqDebugInfoYPos = _jqDebugInfoYPos;

    this.jqCanvas.mousemove
    (
        function(event)
        {
            // http://jquery-howto.blogspot.com/2009/07/identifying-locating-mouse-position-in.html
            jqDebugInfoXPos.html(event.pageX - this.offsetLeft);
            jqDebugInfoYPos.html(event.pageY - this.offsetTop);
        }
    );
}

$jq(document).ready
(
    function()
    {
        var board = new TicTacToeBoard();
        var boardCanvas = new TicTacToeCanvas(board, $jq("canvas#gameboard"));
        boardCanvas.setupLayout();
        boardCanvas.setupDND();
        boardCanvas.setupDebugMouseTracer($jq("div#debugInfo #xPos"), $jq("div#debugInfo #yPos"));
    }
)